<template>
  <a-row :gutter="10">
    <a-col :md="leftColMd" :sm="24" style="margin-bottom: 20px">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">

              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="编号">
                  <a-input placeholder="请输入编号" v-model="queryParam.code"></a-input>
                </a-form-item>
              </a-col>

              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="门店名称">
                  <a-input placeholder="请输入门店名称" v-model="queryParam.terminalName"></a-input>
                </a-form-item>
              </a-col>

              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item  label="状态">
                  <a-select
                    placeholder="请选择状态" v-model="queryParam.bpmStatus"
                    :getPopupContainer="(target) => target.parentNode">
                    <a-select-option :value="2"> 审核中 </a-select-option>
                    <a-select-option :value="3"> 审核通过 </a-select-option>
                    <a-select-option :value="4"> 驳回 </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
              </a-col>

            </a-row>
          </a-form>
        </div>

        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button @click="handleEdit()" type="primary">审核</a-button>
          <!--<a-button type="primary" icon="start" @click="startorstop('009')">启用</a-button>-->
          <!--<a-button type="primary"  @click="startorstop('003')">停用</a-button>-->
          <!--<a-button tabindex="primary" icon="delete" @click="batchDel">删除</a-button>-->
        </div>

        <!-- table区域-begin -->
        <div>
<!--          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
<!--            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{-->
<!--              selectedRowKeys.length }}</a>项-->
<!--            <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
<!--          </div>-->

          <a-table
            ref="table"
            size="middle"
            class='Table'
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio'}"
            @change="handleTableChange">
            <div slot="inUrl" slot-scope="text, record, index" v-viewer="{movable: false}" style="margin-right: 0;width: 32px;text-align: center">
              <viewer :images="[record.avatar]">
                <a-avatar shape="square" size="small" :src="record.avatar" icon="user" />
              </viewer>
            </div>


          </a-table>
        </div>
        <!-- table区域-end -->

        <!-- 表单区域 -->
        <terminal-cer-modal ref="modalForm" @ok="modalFormOk"></terminal-cer-modal>
      </a-card>
    </a-col>
    <a-drawer
      closable
      title="积分明细"
      placement="right"
      width="50%"
      :visible="this.rightcolval == 1"
      @close="onClose"
    >
      <a-col :md="rightColMd" :sm="24" v-if="this.rightcolval == 1">
        <a-card :bordered="false">
          当前积分余额： {{this.scoreNum}}
          <a-table
            style="height:500px"
            ref="table2"
            bordered
            size="middle"
            rowKey="id"
            :columns="columns2"
            :dataSource="dataSource2"
            :pagination="ipagination2"
            :loading="loading2"
            @change="handleTableChange2">
          </a-table>
        </a-card>
      </a-col>
    </a-drawer>

  </a-row>
</template>

<script>
import '@/assets/less/TableExpand.less'
import terminalCerModal from './modules/terminalCerModal'
import {PageListMixin} from '@/mixins/PageListMixin'
import {getAction, postAction} from '@/api/manage'
import ARow from 'ant-design-vue/es/grid/Row'
import ARangePicker from 'ant-design-vue/es/date-picker/RangePicker'
import {filterObj} from '@/utils/util'
export default {
  name: 'TerminalCertificate',
  mixins: [PageListMixin],
  components: {
    ARangePicker,
    ARow,
    terminalCerModal
  },
  data() {
    return {
      imagesFlag:false,
      description: '门店积分',
      model1: {},
      model2: {},
      currentRoleId: '',
      scoreNum: '',
      queryParam1: {},
      queryParam2: {},
      dataSource1: [],
      dataSource2: [],
      ipagination1: {
        current: 1,
        size: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      ipagination2: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      isorter1: {
        column: 'createTime',
        order: 'desc'
      },
      isorter2: {
        column: 'createTime',
        order: 'desc'
      },
      filters1: {},
      filters2: {},
      loading1: false,
      loading2: false,
      test: {},
      rightcolval: false,
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },

        {
          title: '图片',
          align: "center",
          dataIndex: 'urls',
          width: 50,
          scopedSlots: {customRender: 'inUrl'}
        },
        {
          title: '状态',
          align: "center",
          dataIndex: 'bpmStatus'
        },
        {
          title: '审核意见',
          align: "center",
          dataIndex: 'auditOpinion'
        },
        {
          title: '单据号',
          align: "center",
          dataIndex: 'code'
        },
        {
          title: '门店编号',
          align: "center",
          dataIndex: 'terminalCode'
        },

        {
          title: '门店名称',
          align: "center",
          dataIndex: 'terminalName'
        },
        {
          title: '回款方式',
          align: "center",
          dataIndex: 'backTypes'
        },
        {
          title: '金额',
          align: "center",
          dataIndex: 'amount'
        },
        {
          title: '卡号',
          align: "center",
          dataIndex: 'cardSn'
        },
        {
          title: '备注',
          align: "center",
          dataIndex: 'remarks'
        },
        {
          title: '提交人',
          align: "center",
          dataIndex: 'createName'
        },
        {
          title: '创建时间',
          align: "center",
          dataIndex: 'createDate'
        },
        {
          title: '审批人',
          align: "center",
          dataIndex: 'updateName'
        },
        {
          title: '审批时间',
          align: "center",
          dataIndex: 'updateDate'
        }
      ],

      // 高级查询参数
      superQueryParams2: '',
      // 高级查询拼接条件
      superQueryMatchType2: 'and',
      url: {
        list: window._CONFIG['domianSfaURL'] + "/terminal/cnCertificateDetailController/getPageListStatement",

      },
      leftColMd: '',
      rightColMd: '',
    }
  },


  comments: {
    leftColMd() {
      return this.selectedRowKeys1.length === 0 ? 24 : 12
    },
    rightColMd() {
      return this.selectedRowKeys1.length === 0 ? 0 : 12
    }
  },


  methods: {
    handleEdit: async function (record) {
      console.log(this.selectedRowKeys)
      if(this.selectedRowKeys.length<=0){
        this.$message.error('请选择审核内容');
        return
      }
      if(this.selectionRows[0].bpmStatus!="审批中"){
        this.$message.error('该内容已审核，无需重复审核！');
        return
      }
      this.$refs.modalForm.edit(this.selectedRowKeys[0]);
      this.$refs.modalForm.title = "审核";
      // this.$refs.modalForm.disableSubmit = false;
    },
    onClose(){
      this.rightcolval = false;
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
    },
    getQueryParams2() {
      //获取查询条件
      let sqp = {}
      if (this.superQueryParams2) {
        sqp['superQueryParams'] = encodeURI(this.superQueryParams2)
        sqp['superQueryMatchType'] = this.superQueryMatchType2
      }
      var param = Object.assign(sqp, this.queryParam2, this.isorter2, this.filters2)
      param.field = this.getQueryField2()
      param.current = this.ipagination2.current
      param.size = this.ipagination2.pageSize
      return filterObj(param)
    },
    getQueryField2() {
      //TODO 字段权限控制
      var str = 'id,'
      this.columns2.forEach(function (value) {
        str += ',' + value.dataIndex
      })
      return str
    },

    async modalFormOk() {
      // 新增/修改 成功时，重载列表
      await this.loadData();
      this.$refs.modalForm.close();
      this.selectionRows[0].bpmStatus=1;
    },
    hideUserList() {
      //this.rightcolval = 0
      this.selectedRowKeys1 = []
    },
  }
}
</script>

<style scoped>
@import '~@assets/less/common.less';
.anty-img-wrap1{
  width: 32px;
  height: 32px;

  overflow: hidden;
}
</style>
